<template>
  <div id="resume">
    <div id="resume-main">
      <div id="back" >
        <i @click="back()" class="el-icon-back">返回 </i> <el-divider direction="vertical"></el-divider>Ta的简历
      </div>
      <transition name="resume-fade">
        <div class="resume-container">
          <div class="left">
            <el-divider><div class="rec-type">教育和工作经历</div></el-divider>
            <!--    经历      -->
            <experience :exList="item.experienceList" :resumeId="item.id"></experience>

            <el-divider><div class="rec-type">专业技能</div></el-divider>

            <!--    专业技能      -->
            <skills :skills="item.skillList" :resumeId="item.id"></skills>
            <el-divider><div class="rec-type">获得证书</div></el-divider>
            <certificate :certificates="item.certificateList" :resumeId="item.id"></certificate>
            <el-divider><div class="rec-type">自我总结</div></el-divider>
            <!--     自我总结      -->
            <introduction :myIntroduce="item.summarize" :resumeId="item.id"></introduction>
          </div>
          <div class="right">
            <br>
              <h1 style="color:#d29251" >{{item.name||'student'}}</h1>
              <el-input  v-if="editShow" v-model="upName" placeholder="输入新名字" size="mini" class="resume-msg-edit"></el-input>
<!--              <p @click="showEdit(1)" class="position">意向岗位:前端开发工程师</p>-->
<!--              <el-input v-if="edit[1]" v-model="upWant" placeholder="输入新的意向岗位" size="mini" class="resume-msg-edit"></el-input>-->

            <div class="resume-msg">
              <p >{{item.sex}}/{{item.age}}岁</p>
              <el-select v-if="editShow" size="mini" v-model="upSex" placeholder="请选择">
                <el-option label="男" value="男"></el-option>
                <el-option label="女" value="女"></el-option>
              </el-select>
              <el-input v-if="editShow" v-model="upAge" placeholder="输入你的年龄" size="mini" class="resume-msg-edit"></el-input>
              <p >{{item.degree}}</p>
              <el-select v-if="editShow"  size="mini" v-model="upDegree" placeholder="请选择">
                <el-option label="大专" value="大专"></el-option>
                <el-option label="本科" value="本科"></el-option>
                <el-option label="硕士" value="硕士"></el-option>
              </el-select>
              <p>{{item.email}}</p>
              <el-input  v-if="editShow" v-model="upEmail" placeholder="输入新的邮箱" size="mini" class="resume-msg-edit"></el-input>
            </div>

            <br><br>
            <div class="resume-tag">
              <h4>Ta的技能标签</h4>
              <br>
                <el-tag style="margin: 5px" type="success" v-for="tag in dynamicTags">{{tag}}</el-tag>
            </div>

          </div>
        </div>
      </transition>

    </div>

  </div>
</template>

<script>
import certificate from "@/views/Management/Company/LookResume/certificate";
import TopBar from "@/components/content/TopBar";
import myTags from "@/views/Management/Company/LookResume/myTags";
import Experience from "@/views/Management/Company/LookResume/experience";
import Skills from "@/views/Management/Company/LookResume/skills";
import Introduction from "@/views/Management/Company/LookResume/introduction";
import {delResume, getResume, addResume, putResume, getSingleResume} from "@/api/resume";

export default {
  name: "index",
  components: {Introduction, Skills, Experience, TopBar,myTags,certificate},
  props:['id'],
  created() {
    getSingleResume(this.id).then(res=>{
      console.log(res)
      this.item=res.data.extend.resumes[0]
    })
  },
  computed:{
    dynamicTags(){
      return  this.item.skillLabel.split(',')
    }
  },
  data(){
    return{
      item:{

      },
      editShow:false,
      upName:'',
      upSex:'',
      upAge:'',
      upDegree:'',
      upEmail:'',
      activeResumeId:0,
      resumes:[],
      sid:this.$store.getters["user/getUser"].uid,
      resumeData:{
        exList:[
          {id:0,time:'2012-2020',company:'中山大学附属医院',content:'我在该项目负责了哪些工作，分别在哪些地方做得出色/和别人不一样/成长快，这个项目中，我最困难的问题是什么，我采取了什么措施，最后结果如何我在该项目负责了哪些工作，分别在哪些地方做得出色/和别人不一样/成长快，这个项目中，我最困难的问题是什么，我采取了什么措施，最后结果如何'},
          {id:1,time:'2012-2020',company:'中山大学附属医院',content:'我在该项目负责了哪些工作，分别在哪些地方做得出色/和别人不一样/成长快，这个项目中，我最困难的问题是什么，我采取了什么措施，最后结果如何我在该项目负责了哪些工作，分别在哪些地方做得出色/和别人不一样/成长快，这个项目中，我最困难的问题是什么，我采取了什么措施，最后结果如何'},
        ],
        certificates:[
          {content:'计算机二级证书'},
          {content:'全国英语等级考试四级证书'},
          {content:'高级架构师'},
        ],
        myIntroduce:'文件哦i权威和尾鳍为u七五却为何却微乎其微和微乎其微去我看了请问请问请问请问驱蚊器我何求乌克兰获取',
        skills:[
          {content:'精通css,了解个各种css3新特性以及浏览器适配'},
          {content:'精通vue全家桶,对源码有一定的的了解,明白vue的原理,能手写观察者模式'},
          {content:'懂得通过js的防抖节流优化网页性能'},
        ]
      }
    }
  },

  methods:{
    upDataResume(){
      putResume({id:this.activeResumeId,name:this.upName,sex:this.upSex,age:this.upAge,degree:this.upDegree,email:this.upEmail}).then(res=>{
        this.$message.success("更新成功")
        this.init()
        this.editShow=false
      })
    },
    toEdit(item){
      this.editShow=true
      this.upName=item.name
      this.upSex=item.sex
      this.upAge=item.age
      this.upDegree=item.degree
      this.upEmail=item.email
    },
    addResume(){
      addResume({}).then(res=>{
        this.init()
      })

    },
    init(){
      getResume(this.sid).then(res=>{
        console.log(res)
        this.resumes=res.data.extend.resumes
        this.activeResumeId=this.resumes[0].id
      })
    },
    back(){
      this.$parent.resumeShow=false
    },
    delResume(){
      delResume(this.activeResumeId).then(res=>{
        this.$message.success(res.data.msg)
        this.init()
      })
    }
  }
}
</script>

<style lang="stylus" scoped>
.resume-fade-enter-active {
  transition: all .2s ease;
  transition-delay: .2s;
}

.resume-fade-leave-active {
  transition: all .2s cubic-bezier(1.0, 0.5, 0.8, 1.0);
}

.resume-fade-enter
{
  transform: translateY(30px);
  opacity: 0;
}
.resume-fade-leave-to{
  transform: translateY(-30px);
  opacity: 0;
}
#resume
  width 100%
  height 100vh
#resume-main
  width 100%
  height 100%
  background rgb(237,237,237)
  display flex
  flex-direction column
  align-items center
.resume-container
  overflow auto
  width 72%
  box-shadow 0px 0px 2px gray
  display flex
  &>.left
    overflow auto
    padding 30px 40px
    width 70%
    height 100%
    background rgb(254,254,254)
    color #5f1010
  &>.right
    overflow auto
    width 30%
    height 100%
    display flex
    justify-content center
    align-items center
    flex-direction column
    padding 10px 12px
.resume-avatar
  width 100%
  height 200px
  display flex
  flex-direction column
  justify-content space-around
  align-items center
  color #3b8076
  &>.position
    color rgb(7,180,141)
  &>img
    height 80px
    width 80px
    border-radius 50%
.resume-msg
  color #d29251
  width 100%
  height 140px
  margin-top 20px
  display flex
  flex-direction column
  justify-content space-around
  align-items center
.resume-tag
  display flex
  flex-direction column
  height 200px
  width 100%
  align-items center
.rec-type
  width 100px
  display flex
  justify-content center
  align-items center
  height 30px
  background rgb(237,237,237)
  border-radius 40px
#resume-topBar
  padding 15px 0
  width 72%
  height 60px
  display flex
  align-items center
.resume-tab
  background orange
  height 100%
  display flex
  justify-content center
  align-items center
  margin-right 20px
  border-radius 20px
  cursor pointer
.resume-msg-edit
  width 100%
#back
  margin-top 20px
  background white
  height 50px
  width 72%
  display flex
  align-items center
  & i
    cursor pointer

</style>
